<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>web性能优化 | 蔡进东的日志</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="一个前端开发必定绕不开性能优化这个话题。web 性能优化通俗的讲就是让页面尽快呈现在用户眼前。要想解决性能优化这个难题必须提前了解浏览器从输入 URL 到渲染页面的整个过程。简单的来说 web 性能优化主要从以下几个方面入手：  DNS 查询过程 HTTP 请求过程 资源下载过程 浏览器渲染过程 缓存过程  一、DNS 查询优化浏览器地址栏输入 URL 发送出去后，域名会通过 DNS 服务器进行域">
<meta name="keywords" content="性能优化">
<meta property="og:type" content="article">
<meta property="og:title" content="web性能优化">
<meta property="og:url" content="http://cai4633.github.io/2021/01/03/web性能优化/index.html">
<meta property="og:site_name" content="蔡进东的日志">
<meta property="og:description" content="一个前端开发必定绕不开性能优化这个话题。web 性能优化通俗的讲就是让页面尽快呈现在用户眼前。要想解决性能优化这个难题必须提前了解浏览器从输入 URL 到渲染页面的整个过程。简单的来说 web 性能优化主要从以下几个方面入手：  DNS 查询过程 HTTP 请求过程 资源下载过程 浏览器渲染过程 缓存过程  一、DNS 查询优化浏览器地址栏输入 URL 发送出去后，域名会通过 DNS 服务器进行域">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://cai4633.github.io/images/web_performance_optimization.png">
<meta property="og:updated_time" content="2021-01-03T17:12:24.382Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="web性能优化">
<meta name="twitter:description" content="一个前端开发必定绕不开性能优化这个话题。web 性能优化通俗的讲就是让页面尽快呈现在用户眼前。要想解决性能优化这个难题必须提前了解浏览器从输入 URL 到渲染页面的整个过程。简单的来说 web 性能优化主要从以下几个方面入手：  DNS 查询过程 HTTP 请求过程 资源下载过程 浏览器渲染过程 缓存过程  一、DNS 查询优化浏览器地址栏输入 URL 发送出去后，域名会通过 DNS 服务器进行域">
<meta name="twitter:image" content="http://cai4633.github.io/images/web_performance_optimization.png">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">蔡进东的日志</a>
      </h1>
      
      <h2 id="subtitle-wrap">
        <a href="/" id="subtitle">不要在最该奋斗的年纪选择去偷懒，只有度过一段连自己都被感动了的日子，才能变成那个最好的自己.</a>
      </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
        <a class="main-nav-link" href="/">Home</a>
        
        <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
        <a id="nav-search-btn" class="nav-icon" title="搜索"></a>
      </nav>
      <div class="local-search local-search-plugin">
        <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" />
        <div id="local-search-result" class="local-search-result-cls"></div>
      </div>
      <!-- <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://cai4633.github.io"></form>
      </div> -->
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-web性能优化" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2021/01/03/web性能优化/" class="article-date">
  <time datetime="2021-01-03T01:22:12.000Z" itemprop="datePublished">2021-01-03</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/前端/">前端</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      web性能优化
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><img src="/images/web_performance_optimization.png" alt><br>一个前端开发必定绕不开<strong>性能优化</strong>这个话题。web 性能优化通俗的讲就是让页面尽快呈现在用户眼前。要想解决性能优化这个难题必须提前了解<a href="/2020/04/19/浏览器输入URL到页面显示全过程/">浏览器从输入 URL 到渲染页面的整个过程</a>。简单的来说 web 性能优化主要从以下几个方面入手：</p>
<ol>
<li>DNS 查询过程</li>
<li>HTTP 请求过程</li>
<li>资源下载过程</li>
<li>浏览器渲染过程</li>
<li>缓存过程</li>
</ol>
<h2 id="一、DNS-查询优化"><a href="#一、DNS-查询优化" class="headerlink" title="一、DNS 查询优化"></a>一、DNS 查询优化</h2><p>浏览器地址栏输入 URL 发送出去后，域名会通过 DNS 服务器进行域名解析并返回对应的 IP 地址。这个过程通常比较快，但是也可以有优化的空间。</p>
<h3 id="DNS-缓存"><a href="#DNS-缓存" class="headerlink" title="DNS 缓存"></a>DNS 缓存</h3><p>DNS 缓存一般都是浏览器等自动缓存的。但是了解其相应的过程还是必要的。DNS 解析首先查询<strong>浏览器缓存</strong>，然后查询操作系统<strong>HOSTS 文件</strong>，再查询<strong>路由器缓存</strong>，如果无法找到缓存才正式向<strong>本地 DNS 服务器</strong> 或者<strong>根服务器</strong>逐级请求解析。这其中我们可以<strong>更改 hosts</strong> 加快解析速度，但是我们不能指望每个用户都会改 hosts。</p>
<h3 id="负载均衡"><a href="#负载均衡" class="headerlink" title="负载均衡"></a>负载均衡</h3><p>如果同一台服务器同时链接的用户数过大时，服务器可能会崩溃。解决办法就是 DNS 负载均衡技术。原理是在 DNS 服务器中为同一个域名配置多个 IP 地址,在应答 DNS 查询时,根据服务器的负载量以及离用户的距离等返回不同的解析结果,将客户端的访问引导到不同的服务器上,从而达到负载均衡的目的｡例如 <strong>CDN 节点</strong>。</p>
<h3 id="DNS-预获取"><a href="#DNS-预获取" class="headerlink" title="DNS 预获取"></a>DNS 预获取</h3><p>现代浏览器默认会对页面中和当前域名（正在浏览网页的域名）不在同一个域的域名进行预获取，并且缓存结果，这就是隐式的 DNS Prefetch。如果想对页面中没有出现的域进行预获取，那么就要使用显式的 <strong>dns-prefetch</strong> 了。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 打开dns-prefetch --&gt;</span><br><span class="line">&lt;meta http-equiv=&quot;x-dns-prefetch-control&quot; content=&quot;on&quot;&gt;</span><br><span class="line">&lt;link rel=&quot;dns-prefetch&quot; href=&quot;//www.baidu.com&quot;&gt;</span><br><span class="line">&lt;link rel=&quot;dns-prefetch&quot; href=&quot;//zhihu.com&quot;&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 关闭dns-prefetch 禁止隐式dns预获取 --&gt;</span><br><span class="line">&lt;meta http-equiv=&quot;x-dns-prefetch-control&quot; content=&quot;off&quot;&gt;</span><br></pre></td></tr></table></figure>

<h2 id="二、http-请求优化"><a href="#二、http-请求优化" class="headerlink" title="二、http 请求优化"></a>二、http 请求优化</h2><p>当域名解析成功后，浏览器就会和对应的服务器建立 TCP 连接，并发送 http 请求。http 请求可以优化的地方也有很多。</p>
<h3 id="减少-http-请求数"><a href="#减少-http-请求数" class="headerlink" title="减少 http 请求数"></a>减少 http 请求数</h3><p>能合并的文件<strong>尽量合并</strong>，比如使用雪碧图等都可以有效减少 http 请求数。</p>
<h3 id="TCP-连接复用-keep-alive"><a href="#TCP-连接复用-keep-alive" class="headerlink" title="TCP 连接复用 (keep-alive)"></a>TCP 连接复用 (keep-alive)</h3><p>HTTP 协议采用“请求-应答”模式。http1.0 时代，客户端每次请求都要和服务器新建一个 TCP 连接，完成之后立即断开连接。而使用 Keep-Alive 模式会使客户端到服务器端的 TCP 连接持续有效。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 启用Keep-Alive --&gt;</span><br><span class="line">Connection: Keep-Alive</span><br></pre></td></tr></table></figure>

<p>HTTP 1.1 时代，默认开启 Keep-Alive 模式，只有加入 <code>Connection: close</code>才关闭连接。Keep-Alive 模式的属性可以设置 ：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- timeout=6 表示这个 TCP 通道可以保持 6 秒，max=50 表示这个长连接最多接收 50 次请求就断开 --&gt;</span><br><span class="line">Keep-Alive: timeout=6, max=50，</span><br></pre></td></tr></table></figure>

<h3 id="浏览器请求阻塞"><a href="#浏览器请求阻塞" class="headerlink" title="浏览器请求阻塞"></a>浏览器请求阻塞</h3><p>浏览器在<strong>同一时刻对相同域名</strong>的请求数有一定的限制，不同的浏览器表现不同，一般都是 4-10 个。chrome 浏览器默认情况下是 6 个。为了绕过这个限制，可以采用<strong>多域名</strong>的方法。</p>
<h3 id="cookie-free"><a href="#cookie-free" class="headerlink" title="cookie-free"></a>cookie-free</h3><p><strong>浏览器不会把主域名的 Cookie 传给子域名</strong>。利用这一特性我们可以将 css 和 image 单独放在不同的子域名中，减少网络开销，一定程度提高了页面加载速度， 这种技术应用叫做 cookie-free。</p>
<h2 id="三、资源下载优化"><a href="#三、资源下载优化" class="headerlink" title="三、资源下载优化"></a>三、资源下载优化</h2><p>资源下载速度的快慢取决于文件的大小和服务器带宽，所以优化也是从这两方面入手。</p>
<ol>
<li>提高服务器 <strong>server 带宽</strong></li>
<li>开启服务器 <strong>gzip</strong> 压缩</li>
</ol>
<h2 id="四、浏览器渲染优化"><a href="#四、浏览器渲染优化" class="headerlink" title="四、浏览器渲染优化"></a>四、浏览器渲染优化</h2><p>浏览器资源渲染过程如下：</p>
<ol>
<li>解析 HTML 文件，构建 <strong>DOM 树</strong>，与此同时浏览器主进程下载 CSS 文件</li>
<li>CSS 文件下载完成，解析 CSS 文件构建 <strong>CSSOM 树</strong>；</li>
<li>CSSOM + DOM 合并成 <strong>render 树</strong>；</li>
<li>布局（<strong>Layout/reflow</strong>） render 树 ，负责 render 树中的元素的尺寸和位置等计算；</li>
<li>绘制（<strong>paint</strong>） render 树 ，绘制页面的像素信息（color 等）；</li>
<li>浏览器主进程将图层交给 GPU 进程，GPU 进程将各个<strong>图层合成</strong>（composite），最后显示出页面；</li>
</ol>
<p>由此可见：</p>
<ol>
<li>css 的加载<strong>不会影响 dom 的解析</strong>，但<strong>会影响 dom 的最终渲染</strong>。</li>
<li>当浏览器遇到 <code>&lt;script&gt;</code> 时，会<strong>阻止解析器</strong>继续执行。直到 <code>CSSOM 构建</code>完毕，JavaScript 才会运行并继续完成 <code>DOM 构建</code>过程。所以解析优先级 <code>CSSOM &gt; JS &gt; DOM</code>。</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=&apos;&apos; async&gt;</span><br><span class="line">// async: 浏览器遇到带async的 script 标签时会继续解析 DOM，同时脚本也不会被 CSSOM 阻止，即不会阻止 CRP。</span><br><span class="line"></span><br><span class="line">&lt;script src=&apos;&apos; defer&gt;</span><br><span class="line">// defer: 脚本需要等到文档解析后（ **DOMContentLoaded 事件前**）执行，而 async 允许脚本在文档解析时位于后台运行（两者下载的过程都不会阻塞 DOM，但执行会）。</span><br><span class="line">// 当脚本不会修改 DOM 或 CSSOM 时，推荐使用 async 。</span><br></pre></td></tr></table></figure>

<p>了解以上原理后，我们就可以提出以下几点优化建议：</p>
<ol>
<li>合并重复的 css 样式，将 css 样式放在文档前部（如：<code>&lt;head&gt;中</code>）,将 js 放在文档后部（如：<code>&lt;body&gt;最后面</code>）；</li>
<li>只渲染<strong>首屏</strong>，页面采用<strong>懒加载</strong>方式；</li>
<li>有必要的地方采用页面<strong>预加载</strong>；</li>
</ol>
<h2 id="五、缓存优化"><a href="#五、缓存优化" class="headerlink" title="五、缓存优化"></a>五、缓存优化</h2><ol>
<li><p>DNS 缓存 （前面已经提到，此处略）</p>
</li>
<li><p>http 缓存<br>http 缓存主要缓存的对象是向服务器请求的 <strong>css/js/image</strong> 等文件。其主页入口<strong>html 文件</strong>一般不做缓存。下次请求时，缓存过的文件一般就不会向服务器发送请求。如果想解除缓存限制，只需要修改请求 url <strong>版本</strong>号（<code>MD5</code> 算法）。<br>添加缓存的方式：</p>
<ol>
<li><p>后端 response header 添加 <code>cache-control: max-age=1000</code>，此方法最常用；</p>
</li>
<li><p>Expires 和 Last-Modified，逐步被弃用；</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Expires:Thu, 02 Apr 2009 05:14:08 GMT</span><br><span class="line">Last-Modified:Tue, 24 Feb 2009 08:01:04 GMT</span><br></pre></td></tr></table></figure>
</li>
<li><p>ETAG，逐步被弃用<br><code>Etag:“5d8c72a5edda8d6a:3239″</code></p>
</li>
</ol>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="http://cai4633.github.io/2021/01/03/web性能优化/" data-id="ckjqth4rz002f2gw01p6jljey" class="article-share-link">Share</a>-->
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/性能优化/">性能优化</a></li></ul>

    </footer>
  </div>
  <!---->
    <!--
<nav id="article-nav">
  
    <a href="/2021/01/08/前端鉴权总结/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          前端鉴权总结
        
      </div>
    </a>
  
  
    <a href="/2020/12/31/nodejs入门/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">nodejs 入门</div>
    </a>
  
</nav>
-->
  <!---->
</article>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2021/01/08/前端鉴权总结/">前端鉴权总结</a>
          </li>
        
          <li>
            <a href="/2021/01/03/web性能优化/">web性能优化</a>
          </li>
        
          <li>
            <a href="/2020/12/31/nodejs入门/">nodejs 入门</a>
          </li>
        
          <li>
            <a href="/2020/12/27/vue单页面应用白屏屏优化/">vue单页面应用白屏屏优化</a>
          </li>
        
          <li>
            <a href="/2020/12/26/逸辰音乐问题点/">逸辰音乐问题点</a>
          </li>
        
      </ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/01/">一月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/12/">十二月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/09/">九月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/08/">八月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/07/">七月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">五月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/04/">四月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/03/">三月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/02/">二月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">十一月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">十月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">七月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">六月 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">分类</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/ES6/">ES6</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/css/">css</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/html/">html</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/js/">js</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue/">vue</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端项目/">前端项目</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/服务端/">服务端</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/算法/">算法</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Apache/">Apache</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Array/">Array</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/BFC/">BFC</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CORS/">CORS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DOM/">DOM</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DOM-diff/">DOM diff</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSONP/">JSONP</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Vue3/">Vue3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/absolute/">absolute</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ajax/">ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/auto/">auto</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/background/">background</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/const/">const</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/devServer/">devServer</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/function/">function</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/">git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/github/">github</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/">hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/host/">host</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/http/">http</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/js/">js</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/leancloud/">leancloud</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/let/">let</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/position/">position</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/promise/">promise</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/proxy/">proxy</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/script标签/">script标签</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/session-cookie/">session-cookie</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/token/">token</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/v-if/">v-if</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/v-show/">v-show</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vDOM/">vDOM</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vHost/">vHost</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/">vue</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue-cli/">vue-cli</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vuec/">vuec</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue生命周期/">vue生命周期</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/width/">width</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/z-index/">z-index</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/原型链/">原型链</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/同源/">同源</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/外边距/">外边距</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/层叠上下文/">层叠上下文</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能优化/">性能优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/数据结构/">数据结构</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/浏览器/">浏览器</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/百分比/">百分比</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/精华/">精华</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/软件下载/">软件下载</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/鉴权/">鉴权</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云</h3>
    <div class="widget tagcloud">
      <a href="/tags/Apache/" style="font-size: 10px;">Apache</a> <a href="/tags/Array/" style="font-size: 10px;">Array</a> <a href="/tags/BFC/" style="font-size: 10px;">BFC</a> <a href="/tags/CORS/" style="font-size: 10px;">CORS</a> <a href="/tags/DOM/" style="font-size: 10px;">DOM</a> <a href="/tags/DOM-diff/" style="font-size: 10px;">DOM diff</a> <a href="/tags/JSONP/" style="font-size: 10px;">JSONP</a> <a href="/tags/Vue3/" style="font-size: 10px;">Vue3</a> <a href="/tags/absolute/" style="font-size: 10px;">absolute</a> <a href="/tags/ajax/" style="font-size: 10px;">ajax</a> <a href="/tags/auto/" style="font-size: 10px;">auto</a> <a href="/tags/background/" style="font-size: 10px;">background</a> <a href="/tags/const/" style="font-size: 10px;">const</a> <a href="/tags/devServer/" style="font-size: 10px;">devServer</a> <a href="/tags/function/" style="font-size: 10px;">function</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/github/" style="font-size: 10px;">github</a> <a href="/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/tags/host/" style="font-size: 10px;">host</a> <a href="/tags/html/" style="font-size: 10px;">html</a> <a href="/tags/http/" style="font-size: 16.67px;">http</a> <a href="/tags/jquery/" style="font-size: 10px;">jquery</a> <a href="/tags/js/" style="font-size: 20px;">js</a> <a href="/tags/leancloud/" style="font-size: 10px;">leancloud</a> <a href="/tags/let/" style="font-size: 10px;">let</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/position/" style="font-size: 10px;">position</a> <a href="/tags/promise/" style="font-size: 10px;">promise</a> <a href="/tags/proxy/" style="font-size: 10px;">proxy</a> <a href="/tags/script标签/" style="font-size: 10px;">script标签</a> <a href="/tags/session-cookie/" style="font-size: 10px;">session-cookie</a> <a href="/tags/token/" style="font-size: 10px;">token</a> <a href="/tags/v-if/" style="font-size: 10px;">v-if</a> <a href="/tags/v-show/" style="font-size: 10px;">v-show</a> <a href="/tags/vDOM/" style="font-size: 10px;">vDOM</a> <a href="/tags/vHost/" style="font-size: 10px;">vHost</a> <a href="/tags/vue/" style="font-size: 13.33px;">vue</a> <a href="/tags/vue-cli/" style="font-size: 10px;">vue-cli</a> <a href="/tags/vuec/" style="font-size: 10px;">vuec</a> <a href="/tags/vue生命周期/" style="font-size: 10px;">vue生命周期</a> <a href="/tags/width/" style="font-size: 10px;">width</a> <a href="/tags/z-index/" style="font-size: 10px;">z-index</a> <a href="/tags/原型链/" style="font-size: 10px;">原型链</a> <a href="/tags/同源/" style="font-size: 10px;">同源</a> <a href="/tags/外边距/" style="font-size: 10px;">外边距</a> <a href="/tags/层叠上下文/" style="font-size: 10px;">层叠上下文</a> <a href="/tags/性能优化/" style="font-size: 13.33px;">性能优化</a> <a href="/tags/数据结构/" style="font-size: 10px;">数据结构</a> <a href="/tags/浏览器/" style="font-size: 16.67px;">浏览器</a> <a href="/tags/百分比/" style="font-size: 10px;">百分比</a> <a href="/tags/算法/" style="font-size: 10px;">算法</a> <a href="/tags/精华/" style="font-size: 10px;">精华</a> <a href="/tags/软件下载/" style="font-size: 10px;">软件下载</a> <a href="/tags/鉴权/" style="font-size: 10px;">鉴权</a>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2021 <a href="http://github.com/cai4633/cai4633.github.io" target="_blank">Cai4633</a><br>
      <!--Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>-->
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



    <script>
      let isMobile = false
      if (/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
        isMobile = true
        $("#nav").addClass("is-mobile")
        $("footer").addClass("is-mobile")
      }
      if ($(".local-search").size()) {
        $.getScript("/js/search.js", function () {
          searchFunc("/search.xml", "local-search-input", "local-search-result")
        })
      }
    </script>
  </div>
</body>
</html>